<template>
  <div>
    <p :style="{ color: colorString }"
      >vue3--Demo(使用setup函数)--组件provide&inject--GrandSon组件</p
    >
    <p
      >Son组件--数据信息：dataFlag:{{ dataFlag }} color:{{ colorString }} fixModelData:{{
        fixModelData
      }}
      timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="injectMethod">点击调用根组件的弹出提示信息</a-button>
      <a-button type="primary" @click="modifyInjectData"
        >点击在GrandSon组件中修改注入的数据</a-button
      >
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { inject } from 'vue';
  import { DataModel, TimeAndFlagDataModel } from './data';

  console.log(
    'vue3--Demo(使用setup语法糖)--组件provide&inject--GrandSon组件--setup 语法糖 执行了。',
  );

  //注入接收上级传入的数据并在return中导出
  const colorString = inject('color', '#999900');
  const dataFlag = inject('dataFlag', true); //指定默认值为true，不指定默认值时如果父组件中未传入会有警告
  const fixModelData = inject<DataModel>('data1');
  const timeFlagData = inject<TimeAndFlagDataModel>('data2');
  const injectMethod = inject('testProvideMethod');

  //测试在子孙组件中修改注入的数据，所有的子孙和父组件数据均修改；如想要不修改，需要在提供时指定readonly
  function modifyInjectData() {
    timeFlagData.time = new Date();
  }
</script>
<style scoped></style>
